import 'package:flutter/material.dart';
import 'package:kasax/commons/commons.dart';
import 'package:kasax_demos2/entry/entrys.dart';

class SliverListDemo extends StatelessWidget {
  final List<Posts> posts;

  const SliverListDemo(this.posts, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return sliverList2();
  }

  testData() {
    posts == null || posts.isEmpty ? buildLoadingWidget() : sliverList2();
  }

  sliverList() {
    return SliverPadding(
      padding: EdgeInsets.only(left: 16, right: 16),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          return Padding(
            padding: EdgeInsets.only(top: 10),
            child: Image.network(
              posts[index].imageUrl,
              fit: BoxFit.cover,
            ),
          );
        }, childCount: posts.length),
      ),
    );
  }

  sliverList2() {
    return SliverList(
      delegate: SliverChildBuilderDelegate((context, index) {
        return Padding(
          padding: EdgeInsets.only(top: 16.0, left: 16.0, right: 16.0, bottom: index == posts.length - 1 ? 16 : 0),
          child: buildPageContent(index),
        );
      }, childCount: posts.length),
    );
  }

  Material buildPageContent(int index) {
    return Material(
      // elevation: 14.0,
      // color: Colors.yellow,
      // borderOnForeground: true,
      borderRadius: BorderRadius.circular(12.0),
      shadowColor: Colors.grey.withOpacity(0.5),
      child: buildStack(index),
    );
  }

  Stack buildStack(int index) {
    return Stack(
      children: [
        AspectRatio(
          aspectRatio: 16 / 9,
          child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(image: NetworkImage(posts[index].imageUrl), fit: BoxFit.cover),
                borderRadius: BorderRadius.circular(12.0),
                color: Colors.red,
                border: Border.all(color: Colors.blue, width: 2)),
          ),
        ),
        Positioned(
            top: 32.0,
            left: 32.0,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  posts[index].title,
                  style: TextStyle(fontSize: 20.0, color: Colors.white),
                ),
                Text(
                  posts[index].author,
                  style: TextStyle(fontSize: 13.0, color: Colors.white),
                )
              ],
            ))
      ],
    );
  }
}
